<template>
  <footer id="footer">
    <el-row type="flex" justify="center" align="middle" class="code-row-bg" :gutter="20">
      <el-col :xs="24" :sm="12" :md="4" :lg="4">
        <h1><a href="#">关于我们</a></h1>
        <el-row :style="{'height':'90px'}">
          <a :style="{'height':'30px','width':'100%'}" href="#">提交建议</a><br/>
          <a :style="{'height':'30px','width':'100%'}" href="#">加入我们</a>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="12" :md="4" :lg="4">
        <h1>学习链接</h1>
        <el-row :style="{'height':'90px'}">
          <a :style="{'height':'30px','width':'100%'}" href="https://blog.csdn.net/">CSDN</a><br/>
          <a :style="{'height':'30px','width':'100%'}" href="https://www.runoob.com/">菜鸟编程</a><br/>
          <a :style="{'height':'30px','width':'100%'}" href="https://www.w3cschool.cn/">W3CShool</a>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <h1>联系方式</h1>
        <el-row :style="{'height':'90px'}">
          <el-row :style="{'height':'30px','width':'100%'}">
            <strong> 地址：<br/></strong><small>闽南科技菲华楼二楼计算机软件学会<br/></small>
          </el-row>
          <el-row :style="{'height':'30px','width':'100%'}">
            <strong>邮箱：<br/></strong><small>1079952096@qq.com<br/></small>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </footer>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyFooter',
  setup () {
    return {}
  }
})
</script>

<style scoped>

a {
  color: #7f8c8d;
  cursor: pointer !important;
  text-decoration: none !important;
}

#footer {
  background: #ffffff;
  border-top: 1px solid #e2e4e6;
  font-size: 12px;
  color: #787d82;
  padding: 30px;
  bottom: 0;
  z-index: 9999;
}
</style>
